<!--
 * @Description: 用户管理
 * @Author: qingyang
 * @Date: 2022-01-10 16:04:17
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-11 16:38:15
-->
<template>
  <div class="user-list-container">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #headerRightButton>
        <el-button
          type="primary"
          :loading="calcLoading"
          @click="addTask"
          v-btnPermission="'USER_CREATE'"
          ><CIcon class="g-mr4" type="c-xian-xinjian"></CIcon>新增</el-button
        >
      </template>
      <template #realNameSlot="{ scope }">
        <CAvatar class="g-mr10" size="small" style="background: #028968">{{
          scope.row?.realName[0]
        }}</CAvatar>
        <CLink @click="tdot(scope.row)">{{ empty(scope.row.realName) }}</CLink>
      </template>
      <template #roleSlot="{ scope }">
        {{
          empty(
            transformObjectToValueStr((scope.row as GetUsersListResultModel[0]).role || {}, '、')
          )
        }}
      </template>
      <template #creatorSlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.createBy"
          :sub-text="scope.row.createTime"
        ></CTableColumn>
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>
    <AddOrEditUserDialog
      v-model:visible="addOrEditTaskVisible"
      :info="infoDetail"
      @refresh="handleRefresh"
    ></AddOrEditUserDialog>
    <detail v-model:visible="detailVisible" :info="infoDetail"></detail>
  </div>
</template>
<script lang="ts" setup name="SystemUserList">
import { reactive, ref } from 'vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { useFactorList } from './useUserList';
import { empty, transformObjectToValueStr } from '@/utils/index';
import AddOrEditUserDialog from './components/AddOrEditUserDialog/index.vue';
import Detail from './components/detail/index.vue';
import { useMessage } from '@/hooks/useMessage';
import { deleteUser, resetPassword } from '@/apis/system/user';
import type { GetUsersListResultModel } from '@/apis/system/model/userModel';
import { CLink } from '@/components/CLink/index';
import { CAvatar } from '@/components/CAvatar/index';

import { CTableColumn, CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';

const { createConfirm, createMessage } = useMessage();
const { searchOptions, searchForm, tableOptions, tableFieldsSetting } = useFactorList();
const addOrEditTaskVisible = ref(false);
const detailVisible = ref(false);
const infoDetail = ref<GetUsersListResultModel[0]>();

const options = reactive<CPageTableProps>({
  title: '用户管理',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
// 计算loading
const calcLoading = ref(false);

const [registerPage, { refresh }] = useCPageTable(options);

const tdot = (row: GetUsersListResultModel[0]) => {
  infoDetail.value = row;
  detailVisible.value = true;
};

const edit = (row: GetUsersListResultModel[0]) => {
  infoDetail.value = row;
  addOrEditTaskVisible.value = true;
};

const addTask = () => {
  infoDetail.value = undefined;
  addOrEditTaskVisible.value = true;
};

const handleRefresh = () => {
  console.log(111111);
  refresh();
};
const dlt = (item: GetUsersListResultModel[0]) => {
  console.log(item, item.userId);
  createConfirm('提示', '确认删除该用户？', {
    iconType: 'warning',
    confirmButtonText: '删除'
  }).then(async () => {
    deleteUser(item.userId).then(() => {
      createMessage.success('删除用户成功！');
      refresh();
    });
  });
};

const resetPass = (item: GetUsersListResultModel[0]) => {
  createConfirm('确认重置密码？', '点击确定后将重置密码。', {
    iconType: '',
    confirmButtonText: '确定'
  }).then(async () => {
    resetPassword(item.userId).then(() => {
      createMessage.success('重置成功，新密码已发出！');
      refresh();
    });
  });
};

/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: GetUsersListResultModel[0]): TableButtonItem[] {
  return [
    {
      text: '重置密码',
      btnPermission: 'RESET_PWD',
      onClick: () => resetPass(row)
    },
    {
      text: '编辑',
      btnPermission: 'USER_EDIT',
      onClick: () => edit(row)
    },
    {
      text: '删除',
      btnPermission: 'USER_DELETE',
      onClick: () => dlt(row)
    }
  ];
}
</script>

<style lang="scss" scoped>
.user-list-container {
  min-height: 80%;
}
.round {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #51596c;
  color: #fff;
  line-height: 28px;
  text-align: center;
  font-style: normal;
  margin-right: 10px;
}
</style>
